<!-- 地图 -->
<template>
    <div id="bingtu">
        <div id="container" style="min-width:400px;height:400px"></div>
    </div>
</template>

<script>
import Highcharts from "highcharts/highstock"
// import ch from 'echarts'
// let echarts = require('echarts/lib/echarts')
export default {
    props: {

    },
    data() {
        return {
            num:1
        };
    },
    computed: {

    },
    created() {
   },
    mounted() {
    
var chart = Highcharts.chart('container', {
	chart: {
		type: 'column'
	},
	title: {
		text: '按性别划分的水果消费总量'
	},
	xAxis: {
		categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']
    },
    	legend: {
		// enabled: false,
		layout: 'horizontal',
		align: 'center',
        verticalAlign: 'bottom',
        navigation:{
            activeColor:'#666'
        }
	},
	// yAxis: {
	// 	allowDecimals: false,
	// 	min: 0,
	// 	title: {
	// 		text: '水果数量'
	// 	}
    // },
      yAxis:[{ // Primary yAxis
                    
		allowDecimals: false,
		min: 0,
		title: {
            text: '水果数量',
             style: {
                            color: '#f40'
                        }
		}
    }, { // Secondary yAxis
                    title: {
                        text: '发送数 (条)',
                        style: {
                            color: '#4572A7'
                        }
                    },
                    labels: {
                        format: '{value} %',
                        style: {
                            color: '#4572A7'
                        }
                    },
                    opposite: true
                }],
    // 鼠标光标的内容
	tooltip: {
		formatter: function () {
			return '<b>' + this.x + '</b><br/>' +
				this.series.name + ': ' + this.y + '<br/>' +
				'总量: ' + this.point.stackTotal;
		}
    },
    // 数据列配置
	plotOptions: {
        // 柱状图
		column: {
            // 堆叠
			stacking: 'normal'
		}
	},
	series: [{
		name: '小张',
        data: [5, 3, 4, 7, 2],
        // stack值是分有几组
		stack: 'male' // stack 值相同的为同一组
	}, {
		name: '小潘',
		data: [3, 4, 4, 2, 5],
		stack: 'male'
	}, {
		name: '小彭',
		data: [2, 5, 6, 2, 1],
		stack: 'female'
	}, {
		name: '小王',
		data: [3, 0, 4, 4, 3],
		stack: 'female'
	}, {
		name: '小花',
		data: [5, 6, 4, 2, 3],
		stack: 'female'
	},{
		name: 'lily',
		data: [5, 6, 4, 2, 3],
		stack: 'male+female'
	}]
});
    },
    watch: {

    },
    methods: {

    },
    components: {

    },
};
</script>

<style scoped>

</style>
